<template>
    <div v-if="reloadFlag" class="relative">
        <slot></slot>
        <div
            v-show="showPlaceholder"
            class="absolute-lt w-full h-full"
            :class="placeholderClass"
        >
            <div v-show="loading" class="absolute-center">
                <n-spin :show="true" :size="loadingSize" />
            </div>
            <div v-show="isEmpty" class="absolute-center">
                <div class="relative">
                    <div class="flex-col">
                        <icon-local-empty-data :class="iconClass" />
<!--                        <p class="absolute-lb w-full text-center" :class="descClass">-->
<!--                            {{ emptyDesc }}-->
<!--                        </p>-->
<!--                        <p class="w-full text-center" :class="descClass">-->
<!--                            {{ emptyDesc }}-->
<!--                        </p>-->

                    </div>
                    <div v-if="itemKey==='sysNotice'" class="flex justify-around items-center mb-32px">
                        <jb-btn v-permission="'sys_notice'" @click="$router.push('/user/notice')">通知管理</jb-btn>
                        <jb-btn v-permission="'sys_notice'" type="primary"  @click="$router.push('/admin/sysnotice/public')">快速添加</jb-btn>
                    </div>
                    <div v-else-if="itemKey==='todo'" class="flex justify-around items-center mb-32px">
                        <jb-btn @click="$router.push('/user/notice')">待办管理</jb-btn>
                        <jb-btn  type="primary" @click="handleAddTodo">快速添加</jb-btn>
                    </div>

                </div>

            </div>
            <div v-show="!network" class="absolute-center">
                <div
                    class="relative"
                    :class="{ 'cursor-pointer': showNetworkReload }"
                    @click="handleReload"
                >
                    <icon-local-network-error :class="iconClass" />
                    <p class="absolute-lb w-full text-center" :class="descClass">
                        {{ networkErrorDesc }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onUnmounted, watch } from 'vue'
import { useBoolean } from '@/hooks'
import { NETWORK_ERROR_MSG } from '@/utils/request/constant'
import {useRouter} from "vue-router";
import {useAuthStore} from "@/store";

defineOptions({ name: 'LoadingEmptyWrapper' })

interface Props {
    /** 是否加载 */
    loading: boolean
    /** 是否为空 */
    empty?: boolean
    /** 加载图标的大小 */
    loadingSize?: 'small' | 'medium' | 'large'
    /** 中间占位符的class */
    placeholderClass?: string
    /** 空数据描述文本 */
    emptyDesc?: string
    /** 图标的class */
    iconClass?: string
    /** 描述文本的class */
    descClass?: string
    /** 显示网络异常的重试点击按钮 */
    showNetworkReload?: boolean
    /** tab key */
    itemKey:string
}

const props = withDefaults(defineProps<Props>(), {
    loading: false,
    empty: false,
    loadingSize: 'medium',
    placeholderClass:
        'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
    emptyDesc: '暂无数据',
    iconClass: 'text-320px text-primary',
    descClass: 'text-16px text-#666',
    showNetworkReload: false,
    itemKey:''
})
const router = useRouter()
function handleAddTodo(){
    useAuthStore().newTodo = true
    router.push({path:'/user/notice'})
}

// 网络状态
const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine)
const { bool: reloadFlag, setBool: setReload } = useBoolean(true)

// 数据是否为空
const isEmpty = computed(() => props.empty && !props.loading && network.value)

const showPlaceholder = computed(() => props.loading || isEmpty.value || !network.value)

const networkErrorDesc = computed(() =>
    props.showNetworkReload ? `${NETWORK_ERROR_MSG}, 点击重试` : NETWORK_ERROR_MSG
)

function handleReload() {
    if (!props.showNetworkReload) return
    setReload(false)
    nextTick(() => {
        setReload(true)
    })
}

const stopHandle = watch(
    () => props.loading,
    (newValue) => {
        // 结束加载判断一下网络状态
        if (!newValue) {
            setNetwork(window.navigator.onLine)
        }
    }
)

onUnmounted(() => {
    stopHandle()
})
</script>

<style scoped></style>
